<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <!--1.引入相关的库文件-->
    <script src="../lib/vue_2.5.22.js"></script>
    <script src="../lib/vue-router_3.0.2.js"></script>
</head>
<body>


<!-- 被vm实例所控制的区域-->
<div id="app">
    <!-- 子组件之间的数据是相互独立的 -->
    <button-counter></button-counter>
    <br>
    <br>
    <button-counter></button-counter>
    <br>
    <br>
    <button-counter></button-counter>
    <br>
    <br>
    <br>
    <!-- 驼峰式命名组件放在 根组件就会出问题
        如果使用驼峰式命名组件, 那么在使用组件的时候, 只能在字符串模板中用驼峰的方式使用组件
        但是在普通的标签模板中, 必须使用短横线方式使用组件
        [Vue warn]: Unknown custom element: <helloworld>  -->
    <!--<HelloWorld></HelloWorld>-->
    <hello-world></hello-world>

    <h2>parentNum = {{parentNum}}</h2>
</div>

<script>


    /**
     * 全局组件注册
     */
    Vue.component('button-counter', {

        /**
         * data必须是一个函数, 同时这个函数要求返回一个对象
         * # 分析函数与普通对象的对比
         * @returns {{count: number}}
         */
        data: function () {
            return {
                count: 0
            }
        },
        /**
         * 组件模板内容必须是单个根元素
         * 否则就是下面报错
         * vue_2.5.22.js:616 [Vue warn]: Error compiling template:
         */
        // template: '<button @click="count++">点击了 {{count}} 次</button>',
        template: `<div>
                    <button @click="handle">点击了 {{count}} 次</button>
                    <button>测试</button>

                    <p>在字符串模板中可以使用驼峰的方式使用组件</p>
                    <HelloWorld></HelloWorld>
                </div>`,
        methods: {
            handle: function () {
                this.count += 2;
            }
        }
    });


    Vue.component('HelloWorld', {
        data: function () {
            return {
                msg: '你好, 世界!'
            }
        },
        template: `<div>
            {{msg}}
        </div>`
    });

    new Vue({
        // 指定控制的区域
        el: "#app",
        data: {
            parentNum: 0
        },
    })

</script>


</body>
</html>